<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络请求之fetch的调用</title>
    <!-- 导入vue库依赖 -->
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
</head>

<body>
    <div id="app"></div>
    <script>
        // fetch api的基本使用  https://www.baidu.com/

        fetch("https://www.baidu.com").then(function(data) {
                // 返回的是promise对象 方法返回之后 再调用then接口实现结果回调
                return data.text();
            })
            .then(function(data) {
                console.log(data);
            })
            // fetch请求方式的设置 get(查)和delete（删）请求方式相同  传统方式使用？的方式拼接请求参数 restful使用/的方式
        fetch(URL, {
            method: 'get'
                // method:'delete'
        }).then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log('结果 ' + data);
        })

        // post（增）请求需要额外增加两个参数 body和headers put（改）请求 和post类似 需要传递body字段 请求url中添加id
        // 指明需要改哪条数据

        fetch(url, {
            method: 'post',
            body: 'uname-lisi&pwd=123',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
                msg: ''
            },
            methods: {},
        })
    </script>
</body>

</html>